import React, { PureComponent, Suspense} from "react"
import { Layout,  } from "antd"
import Link from 'umi/link';
import styles from "./index.less"
import PageLoading from '@/components/PageLoading';
import Ellipsis from '@/components/Ellipsis';
import { getDefaultCollapsedSubMenus, getMenuStrKeys } from "./SiderMenuUtils"
import classNames from "classnames"

const { Sider } = Layout;
const BaseMenu = React.lazy(() => import("./BaseMenu"));
let firstMount = true;

export default class SiderMenu extends PureComponent {

  constructor(props) {
    super(props);

    //被选中的菜单
    this.state = {
      openKeys: getDefaultCollapsedSubMenus(props),
    }
  }
  static getDerivedStateFromProps(props, state){
    const { pathname, flatMenuKeysLen } = state;

    if (props.location.pathname !== pathname || props.flatMenuKeys.length !== flatMenuKeysLen) {
      return {
        pathname: props.location.pathname,
        flatMenuKeysLen: props.flatMenuKeys.length,
        openKeys: getDefaultCollapsedSubMenus(props),
      };
    }
    return null;
  }
  isMainMenu = key => {
    const { menuData } = this.props;
    return menuData.some(item => {
      if (key) {
        let itemKey = getMenuStrKeys(item.key, item.path);
        return itemKey === key || item.path === key;
      }
      return false;
    });
  };

  handleOpenChange = openKeys=>{
    if (openKeys) {
      const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
      console.log("openKeys",openKeys,moreThanOne)
      this.setState({
        openKeys: moreThanOne ? [openKeys.pop()] : openKeys,
      });
    }
  }

  render(){
    const {collapsed, siderWidth, logo,
      fixSiderbar, title,theme, isMobile,onCollapse } = this.props;
    const { openKeys } = this.state;

    const defaultProps = collapsed ? {} : { openKeys };

    const siderClassName = classNames(styles.sider, {
      [styles.fixSiderBar]: fixSiderbar,
      [styles.light]: theme === 'light',
    });
    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        onCollapse={collapse => {
          if (firstMount || !isMobile) {
            onCollapse(collapse);
          }
        }}
        width={200}
        breakpoint="xl"
        theme={theme}
        className={siderClassName}
      >
        <div className={styles.logo} id="logo">
          <Link to="/">
            <img src={logo} alt="logo"/>
            <h1>
              <Ellipsis tooltip lines={2}>{title}</Ellipsis>
            </h1>
          </Link>
        </div>


        <Suspense fallback={<PageLoading/>}>
          <BaseMenu
            {...this.props}
            mode='inline'
            handleOpenChange={this.handleOpenChange}
            style={{padding:"16px 0",width:!collapsed ? siderWidth + 8 : '100%',
              marginLeft: !collapsed ? -8 : 0 }}
            {...defaultProps}
          />
        </Suspense>
      </Sider>
        )
  }
}
